<template  ate>
    <div class="paging">
            <div class="paging_div">
                <button class="click_btn">&lt;</button>
                    <ul class="tab_ul">
                        <li v-for="(item,index) in 4" :key="index">
                            <router-link to="" class="pag_li_option">{{item}}</router-link>
                        </li>  
                    </ul>
                <button class="click_btn2">&gt;</button>
            </div>
            <div class="paging_show">
                第
                    <div>{{number}}</div>
                页
            </div>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    data(){
        return{
            number:'1',
        }
    },
    mounted:function(){
        var that =this
        var max=$('.tab_ul li').length;
        var index=0;
        $(".tab_ul li").eq(index).css({"background-color":"#6A0505"})
        $('.click_btn2').click(function () {
            if(index+1==max){
                index=0
            }else{

                index=index+1
            }$('.tab_ul li').eq(index).css({"background-color":"#6A0505"}).siblings().css({"background-color":"#A40000","color":"white"});
            that.number=index+1;

            that.$router.push({path:'/Medfood',query:{page:index+1}})
            location.reload()

            
        });
        $('.click_btn').click(function () { 
             if(index-1<0){
                 index=max-1
             }else{
                 index=index-1
             }$('.tab_ul li').eq(index).css({"background-color":"#6A0505"}).siblings().css({"background-color":"#A40000","color":"white"});
            that.number=index+1;
            that.$router.push({path:'/hosletter',query:{page:index-1}})

            location.reload()

        }),
        $('.tab_ul li').click(function(){
            that.number=$(this).index()+1;
            $(this).css({"background-color":"#6A0505"}).siblings().css({"background-color":"#A40000","color":"white"})

        })
    },
    
}
</script>
<style scoped>
.paging{width:331px;margin:0 auto;}
.paging_div{display:flex;justify-content: space-between;}
.tab_ul{display:flex;justify-content: space-between;width:215px;}
.tab_ul li{width:41px;line-height:41px;border-radius: 20.5px;background-color:#A40000;text-align: center;color:white;font-size:24px;
            overflow: hidden;}
.pag_li_option{color:white;font-size:24px;display:block}
.pag_li_option:hover{background-color:#6A0505;};
.tab_li_back{background-color:white;display:block;color:red}
.click_btn,.click_btn2{color:white;font-size:24px;font-weight: bold;width:41px;line-height:41px;border-radius: 20.5px;border:none;outline: none;
                        background-color:#A40000;text-align: center;cursor: pointer;}
.paging_show{width: 144px;line-height: 43px;text-align: center;font-size: 30px;font-weight: bold;color:#9E290B;
            display:flex;justify-content: space-between;margin:26px auto 0;}
.paging_show div{width:69px;background-color:#9E290B;color:white;border-radius: 22px;}
.pag_li_option .tisp{background-color:white;}
</style>